<template>
  <div>
    <div class="double-sel">
      <a-select @change="firstSel" class="first" default-value="developerIdList" v-model="newItem.key" :style="{ width: `${newItem.keyWidth}px` }" placeholder="请选择">
        <a-option v-for="item of newItem.keyItems" :key="item.value" :label="item.label" :value="item.value" />
      </a-select>
      <a-select class="second" @change="sel" v-model="newItem.value" :style="{ width: `${newItem.width}px` }" allow-clear allow-search placeholder="请选择">
        <a-option :label="item.label" :value="item.value" v-for="item of newItem.optionItems" />
      </a-select>
    </div>
  </div>
</template>

<script lang="ts">
  import { toRefs } from '@vueuse/core'
  import { defineComponent, ref, computed, reactive } from 'vue'
  export default defineComponent({
    props: ['data', 'searchParam'],
    setup(props: any, { emit }) {
      const data: any = reactive({})
      const newItem: any = computed({
        set(val) {
          emit('update:data', val)
        },
        get() {
          return props.data
        },
      })

      const firstSel = (val: string) => {
        newItem.value.keyItems.forEach((e: any) => {
          if (e.value == val) {
            newItem.value.label = e.label
          }
        })
        emit('search')
      }

      const sel = (val: string) => {
        // props.data.optionItems.forEach((e: any) => {
        //   if (e.value == val) {
        //     newItem.value.label = e.label
        //   }
        // })

        emit('search')
      }
      return {
        ...(toRefs(data) as any),
        newItem,
        sel,
        firstSel,
      }
    },
  })
</script>

<style lang="less" scoped></style>
